<template>
    <div class="company-info-root">
        <div class="top">
            <div class="title">企业信息</div>
            <div class="line"></div>
        </div>
        <div class="content">
            <form method="post" action="">
                <div class="name com">
                    <label><span>*</span>企业全称：</label>
                    <el-input :disabled="nameDisabled" type="text" v-model="base.fname" style="width:291px"></el-input>
                    <div class="msg" v-if="wmsgs.name"><img src="@/assets/img/setting/warn.png">{{wmsgs.name}}
                    </div>
                </div>
                <div class="type com">
                    <label><span>*</span>企业类型：</label>
                    <el-select v-model="base.type" size="medium" placeholder="请选择">
                        <el-option v-for="item in types" :key="item.value"
                                   :label="item.label"
                                   :value="item.value">
                        </el-option>
                    </el-select>
                    <div class="msg" v-if="wmsgs.type"><img src="@/assets/img/setting/warn.png">{{wmsgs.type}}
                    </div>
                </div>
                <div class="nature com">
                    <label><span>*</span>企业性质：</label>
                    <el-select v-model="base.nature" size="medium" placeholder="请选择">
                        <el-option v-for="item in natures" :key="item.value"
                                   :label="item.label"
                                   :value="item.value">
                        </el-option>
                    </el-select>
                    <div class="msg" v-if="wmsgs.nature"><img src="@/assets/img/setting/warn.png">{{wmsgs.nature}}
                    </div>
                </div>
                <div class="scale com">
                    <label><span>*</span>企业规模：</label>
                    <el-select v-model="base.scale" size="medium" placeholder="请选择">
                        <el-option
                                v-for="item in scales" :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                    <div class="msg" v-if="wmsgs.scale"><img src="@/assets/img/setting/warn.png">{{wmsgs.scale}}
                    </div>
                </div>
                <div class="area">
                    <label><span>*</span>所在地区：</label>
                    <div class="selectbox">
                        <div class="select">
                            <el-select class="province" v-model="varPro" size="medium" placeholder="请选择"
                                       style="width: 130px">
                                <el-option
                                        v-for="item in provinces" :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                            <el-select class="city" v-model="base.city" size="medium" placeholder="请选择"
                                       style="width: 130px">
                                <el-option
                                        v-for="item in citys" :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                        <el-input class="street" type="text" placeholder="请输入详细地址" v-model="base.street"></el-input>
                    </div>
                </div>
                <div class="business">
                    <label><span>*</span>营业执照：</label>
                    <div class="box">
                        <div class="license">
                            <div class="add">
                                <a>{{base.bLicense?'更换':'请上传'}}</a>
                                <upload @input="uploadImage">
                                    <div class="pane">
                                        <img v-if="!base.bLicense" src="../../assets/img/setting/upload.png">
                                        <img v-if="base.bLicense" :src="base.bLicense"
                                             style="width:100%;height: 100%;position: absolute;left: 0;top:0"/>
                                        <p>支持jpg、jpeg、png格式文件不超<br>过10M</p>
                                        <div v-if="base.bLicense" class="exist_bg">点击更换图片</div>
                                    </div>
                                </upload>
                            </div>
                            <div class="item">
                                <a>{{example.text}}</a>
                                <img :src="example.src">
                            </div>
                        </div>
                        <p>提示：营业执照的黑白复印件、扫描件，需加盖红色公司公章</p>
                    </div>
                </div>
                <div class="brief">
                    <label>企业简介：</label>
                    <textarea style="padding:10px;" placeholder="请输入公司简介" @input="descInput" v-model="base.intr"
                              maxlength="500"
                    > </textarea>
                    <span>{{remnant}}/500</span>
                </div>
                <div class="save">
                    <label></label>
                    <img :src="saveInco" @click="save"/>
                </div>
            </form>
        </div>
    </div>
</template>

<script>
  import upload from '@/components/upload'
  import _ads from '@/assets/utils/adress'
  import _g from '../../assets/utils/global'
  import china from '../../assets/utils/china'
  import _subject from '../../assets/utils/subject'

  export default {
    name: 'companyInfo',
    data: function() {
      return {
        types: [{
          value: '1',
          label: '勘测'
        }],
        natures: [{
          value: '1',
          label: '私企'
        }],
        scales: [{
          value: '1',
          label: '100人以下'
        }],
        provinces: [
          {
            value: '1',
            label: '湖北省'
          },
          {
            value: '2',
            label: '湖南省'
          },
          {
            value: '3',
            label: '广东省'
          }
        ],
        citys: [
          {
            value: '1',
            label: '武汉市'
          },
          {
            value: '2',
            label: '孝感市'
          },
          {
            value: '3',
            label: '十堰市'
          }
        ],
        base: {
          fname: '',
          type: '',
          nature: '',
          scale: '',
          province: '',
          city: '',
          street: '',
          bLicense: '',
          intr: ''
        },
        varPro: '',
        wmsgs: { name: '', type: '', nature: '', scale: '' },
        example: { text: '示例', src: require('@/assets/img/setting/cert.png') },
        remnant: 0,
        saveInco: require('@/assets/img/setting/save.png')
      }
    },
    watch: {
      varPro: {
        immediate: true,
        handler(n) {
          this.citys = china.getCitesByProvinceName(n)
          if (this.citys.length > 0) {
            this.base.city = this.citys[0].value
          }
        }
      }
    },
    computed: {
      nameDisabled() {
        return _subject.getCheckState() !== 0
      }
    },
    methods: {
      check() {
        if (!this.base.fname) {
          this.wmsgs.name = '企业名称不能为空'
          return false
        }
        if (!this.base.type) {
          this.wmsgs.type = '企业类型不能为空'
          return false
        }
        if (!this.base.nature) {
          this.wmsgs.nature = '企业性质不能为空'
          return false
        }
        if (!this.base.scale) {
          this.wmsgs.scale = '企业规模不能为空'
          return false
        }
        if (!this.base.street) {
          _g.message('请填写详细地址', 'warning')
          return false
        }
        if (!this.base.bLicense) {
          _g.message('请上传营业执照', 'warning')
          return false
        }
        if (!this.base.intr) {
          _g.message('请填写企业详情', 'warning')
          return false
        }
        return true
      },
      descInput() {
        this.remnant = this.base.intr ? this.base.intr.length : 0
      },
      uploadImage(e) {
        this.base.bLicense = e
        _g.message('上传成功', 'success')
        console.log('upload image', e)
      },
      save() {
        if (!this.check()) {
          return false
        } else {
          this.wmsgs.name = ''
          this.wmsgs.type = ''
          this.wmsgs.nature = ''
          this.wmsgs.scale = ''
          let param = {
            fullName: this.base.fname,
            typeId: this.base.type,
            natureId: this.base.nature,
            sizeId: this.base.scale,
            province: this.varPro,
            city: this.base.city,
            detailAddress: this.base.street,
            businessLicense: this.base.bLicense,
            introduction: this.base.intr
          }
          console.log('change company param', param)
          _g.apiPost('/company/saveComOrPerInfo.do', param).then(res => {
            _g.toMessage(res)
            if (res.status === 0) {
              console.log('saveComOrPerInfo', res)
              localStorage.setItem(localSaved.userInfo, JSON.stringify(res.data))
              console.log('save company', localStorage.getItem(localSaved.userInfo))
              _subject.page.next(-1)
            }
          })
        }
      }
    },
    mounted() {
      if (localStorage.getItem(localSaved.userInfo)) {
        const uInfo = JSON.parse(localStorage.getItem(localSaved.userInfo))
        console.log('u info', uInfo)
        this.base.fname = uInfo.company.fullName
        this.base.type = uInfo.company.typeId
        this.base.nature = uInfo.company.natureId
        this.base.scale = uInfo.company.sizeId
        this.base.bLicense = uInfo.company.businessLicense
        this.base.province = uInfo.company.province
        this.varPro = uInfo.company.province
        this.base.city = uInfo.company.city
        this.base.street = uInfo.company.detailAddress
        this.base.intr = uInfo.company.introduction
        this.provinces = china.getProvinces()
        this.citys = china.getCitesByProvinceName(this.varPro)
        console.log('provinces', this.provinces, 'cities', this.citys)
        this.descInput()
        //请求静态资源
        _g.apiPost('/company/selectStaticData.do', { state: '10,11,12' })
          .then(res => {
            if (res.status === 0) {
              this.types = []
              for (let i = 0; i < res.data[10].length; i++) {
                this.types[i] = { value: res.data[10][i].id, label: res.data[10][i].content }
              }
              this.natures = []
              for (let i = 0; i < res.data[11].length; i++) {
                this.natures[i] = { value: res.data[11][i].id, label: res.data[11][i].content }
              }
              this.scales = []
              for (let i = 0; i < res.data[12].length; i++) {
                this.scales[i] = { value: res.data[12][i].id, label: res.data[12][i].content }
              }
            } else {
              this.base.type = uInfo.company.typeIdStr
              this.base.nature = uInfo.company.natureIdStr
              this.base.scale = uInfo.company.sizeIdStr
            }
          })
          .catch(() => {
            this.base.type = uInfo.company.typeIdStr
            this.base.nature = uInfo.company.natureIdStr
            this.base.scale = uInfo.company.sizeIdStr
          })
      }
    },
    components: {
      upload
    }
  }
</script>

<style scoped>
    .company-info-root {
        width: 980px;
        height: 1267px;
        background: #FFFFFF;
        position: relative;
    }

    .company-info-root .top {
        height: 50px;
        box-sizing: border-box;
        min-width: 980px;
        border: 2px solid white;
        background: rgba(251, 251, 255, 1);
    }

    .company-info-root .top .title {
        margin-top: 8px;
        margin-left: 45px;
        margin-bottom: 4px;
        width: 77px;
        height: 26px;
        font-size: 19px;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 26px;
    }

    .company-info-root .top .line {
        width: 50px;
        height: 3px;
        margin-left: 64px;
        background: rgba(255, 115, 0, 1);
    }

    .company-info-root .content {
        position: absolute;
        top: 53px;
        left: 0;
    }

    .company-info-root .content input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
        color: rgba(204, 204, 204, 1);
    }

    .company-info-root .content .el-input, .company-info-root .content .brief textarea {
        padding-left: 10px;
    }

    .company-info-root .content .brief textarea {
        margin-left: 10px;
    }

    .company-info-root .content .brief textarea:focus {
        border: 1px solid #ff7300;
    }

    .company-info-root .content .business .box {
        margin-left: 10px;
    }

    .company-info-root .content .business .add {
        margin-right: 20px;
    }

    .company-info-root .content .business .license {
        display: flex;
        flex-direction: row;
        justify-content: start;
    }

    .company-info-root .content .business a {
        display: block;
        margin-bottom: 5px;
        font-size: 14px;
    }

    .company-info-root .content .business .pane {
        width: 130px;
        height: 186px;
        background: rgba(251, 251, 251, 1);
        border-radius: 2px;
        border: 1px solid rgba(204, 204, 204, 1);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    .company-info-root .content .business .pane .exist_bg {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 1);
        border-radius: 2px;
        opacity: 0.5;
        border: 1px solid rgba(204, 204, 204, 1);
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 0;
        top: 0;
        font-size: 11px;
        /*font-family:PingFangSC-Medium;*/
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        line-height: 16px;
    }

    .company-info-root .content .business .pane > img:first-child {
        width: 25px;
        height: 21px;
        margin-bottom: 6px;
    }

    .company-info-root .content .business .pane > p {
        font-size: 11px;
        color: #999999;
        text-align: center;
    }

    .company-info-root .content .business .box p {
        margin-top: 10px;
        color: #999999;
        font-size: 11px;
    }

    .company-info-root .content .business .item img {
        width: 129px;
        height: 185px;
        /*border: 1px dashed black;*/
    }

    .company-info-root .content .business .add a {
        color: rgba(75, 139, 249, 1);
    }

    .company-info-root .content .business .item a {
        color: #999999
    }

    .company-info-root .content .brief {
        position: relative;
    }

    .company-info-root .content .brief span {
        position: absolute;
        bottom: 10px;
        right: 10px;
        color: #999999;
    }

    .company-info-root .content .brief > textarea {
        width: 649px;
        height: 289px;
        border-radius: 3px;
        border: 1px solid rgba(204, 204, 204, 1);
    }

    .company-info-root .content .save > img {
        margin-top: 43px;
        width: 145px;
        height: 60px;
    }

    .company-info-root .content label {
        height: 33px;
        line-height: 33px;
        font-size: 12px;
    }

    .company-info-root .content select {
        width: 135px;
        height: 36px;
        margin-bottom: 10px;
    }

    .company-info-root .content .select .city {
        margin-left: 21px;
        margin-bottom: 10px;
    }

    .company-info-root .content .street {
        width: 410px;
    }

    .company-info-root .content .com > .el-select {
        margin-left: 10px;
        width: 281px;
    }

    .company-info-root .content .area {
        display: flex;
        flex-direction: row;
        justify-content: start;
    }

    .company-info-root .content {
        margin-left: 113px;
        margin-top: 54px;
    }

    .company-info-root .content .msg {
        margin-left: 10px;
        color: rgba(255, 90, 90, 1);
        display: flex;
        align-items: center;
    }

    .company-info-root .content .msg > img {
        width: 12px;
        height: 12px;
        margin-left: 5px;
        margin-right: 4px;
    }

    .company-info-root .content form > div {
        display: flex;
        flex-direction: row;
        justify-content: start;
        margin-bottom: 20px;
    }

    .company-info-root .content .select {
        margin-left: 10px;
        margin-bottom: 15px;
    }

    .company-info-root .content div label {
        display: inline-block;
        width: 88px;
        font-size: 14px;
        text-align: right;
    }

    .company-info-root .content div label span {
        color: #FF7300;
    }

</style>